<!DOCTYPE html>
<html>
<head>
<title>Relativity Diagram</title>
<style>
  body {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    background-color: white;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="350"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // Style settings
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 1.5;
  ctx.font = 'italic 22px Times New Roman';
  ctx.textBaseline = 'middle';

  // Origin point
  const ox = 70;
  const oy = 280;

  // --- Draw Axes ---
  // Y-axis line
  ctx.beginPath();
  ctx.moveTo(ox, oy);
  ctx.lineTo(ox, 40);
  ctx.stroke();
  // Y-axis arrowhead
  ctx.beginPath();
  ctx.moveTo(ox, 40);
  ctx.lineTo(ox - 6, 50);
  ctx.moveTo(ox, 40);
  ctx.lineTo(ox + 6, 50);
  ctx.stroke();
  // Y-axis label
  ctx.fillText('y', ox + 15, 45);

  // X-axis line
  ctx.beginPath();
  ctx.moveTo(ox, oy);
  ctx.lineTo(470, oy);
  ctx.stroke();
  // X-axis arrowhead
  ctx.beginPath();
  ctx.moveTo(470, oy);
  ctx.lineTo(460, oy - 6);
  ctx.moveTo(470, oy);
  ctx.lineTo(460, oy + 6);
  ctx.stroke();
  // X-axis label
  ctx.fillText('x', 475, oy + 5);

  // Origin label
  ctx.fillText('O', ox - 25, oy + 5);

  // --- Draw Rod and Particle ---
  // Rod A position
  const Ax = ox + 30;
  const Ay = oy;
  
  // Rod properties
  const rodLength = 280;
  const phi = Math.PI / 7; // Approx 25.7 degrees, visually similar to the image
  
  // Rod B position
  const Bx = Ax + rodLength * Math.cos(phi);
  const By = Ay - rodLength * Math.sin(phi);

  // Draw Rod AB
  ctx.beginPath();
  ctx.moveTo(Ax, Ay);
  ctx.lineTo(Bx, By);
  ctx.stroke();

  // Labels A and B
  ctx.fillText('A', Ax - 5, Ay + 25);
  ctx.fillText('B', Bx + 10, By);

  // Particle P
  ctx.beginPath();
  ctx.arc(Ax, Ay, 4, 0, 2 * Math.PI);
  ctx.fill();
  ctx.fillText('P', Ax - 25, Ay - 15);

  // --- Draw Angle ---
  // Angle arc
  ctx.beginPath();
  ctx.arc(Ax, Ay, 40, 0, -phi, true);
  ctx.stroke();
  
  // Angle label phi
  ctx.save();
  ctx.font = 'italic 24px Times New Roman';
  const phiLabelX = Ax + 55 * Math.cos(phi / 2);
  const phiLabelY = Ay - 55 * Math.sin(phi / 2);
  ctx.fillText('φ', phiLabelX - 5, phiLabelY + 5);
  ctx.restore();

  // --- Draw Velocity Vector ---
  // Position and length
  const vx_start = 320;
  const vy_pos = 200;
  const vLength = 80;
  
  // Style for velocity arrow
  ctx.save();
  ctx.lineWidth = 2;
  
  // Arrow line
  ctx.beginPath();
  ctx.moveTo(vx_start, vy_pos);
  ctx.lineTo(vx_start + vLength, vy_pos);
  ctx.stroke();
  
  // Arrowhead
  ctx.beginPath();
  const arrowheadX = vx_start + vLength;
  ctx.moveTo(arrowheadX, vy_pos);
  ctx.lineTo(arrowheadX - 12, vy_pos - 7);
  ctx.moveTo(arrowheadX, vy_pos);
  ctx.lineTo(arrowheadX - 12, vy_pos + 7);
  ctx.stroke();
  ctx.restore();
  
  // Velocity label
  ctx.fillText('v', vx_start + vLength / 2 - 10, vy_pos - 20);

</script>
</body>
</html>